<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.library.entity.Student" %>
<!DOCTYPE html>
<html>
<head>
    <title>图书管理系统 - 借书记录</title>
    <style>
        /* 页面整体样式 */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }

        /* 顶部导航栏样式 */
        .header {
            background-color: #f8f9fa;
            padding: 10px 20px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            margin: 0;
            font-size: 20px;
            color: #333;
        }

        .user-info {
            display: flex;
            align-items: center;
        }

        .logout-btn {
            margin-left: 15px;
            padding: 5px 10px;
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            color: #333;
        }

        /* 左侧导航栏样式 */
        .nav-container {
            width: 200px;
            background-color: #f8f9fa;
            float: left;
            min-height: calc(100vh - 50px);
            border-right: 1px solid #e0e0e0;
        }

        .student-label {
            padding: 15px;
            background-color: #e9ecef;
            font-weight: bold;
            border-bottom: 1px solid #ddd;
        }

        .nav-container ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .nav-container li {
            padding: 15px;
            cursor: pointer;
            border-bottom: 1px solid #e0e0e0;
        }

        .nav-container li:hover {
            background-color: #e9ecef;
        }

        .nav-container li a {
            text-decoration: none;
            color: #333;
            display: block;
        }

        .nav-container li.active {
            background-color: #007bff;
        }

        .nav-container li.active a {
            color: white;
        }

        /* 中间内容区域样式 */
        .content-container {
            margin-left: 200px;
            padding: 20px;
        }

        /* 筛选框样式 */
        .filter-box {
            margin-bottom: 20px;
            background-color: white;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .filter-box select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-right: 10px;
            width: 180px;
        }

        .filter-box input[type="submit"] {
            padding: 8px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .filter-box input[type="submit"]:hover {
            background-color: #0069d9;
        }

        /* 表格样式 */
        .record-table {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .record-table th, .record-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .record-table th {
            background-color: #f8f9fa;
            font-weight: bold;
        }

        .record-table tr:hover {
            background-color: #f5f5f5;
        }

        .back-link {
            display: inline-block;
            margin-top: 20px;
            color: #007bff;
            text-decoration: none;
        }

        .back-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<div class="header">
    <h1>图书管理系统 - 学生端</h1>
    <div class="user-info">
        欢迎您，<%=((Student) request.getSession().getAttribute("student")).getUsername()%>
        <a href="${pageContext.request.contextPath}/common?method=logout" class="logout-btn">退出登录</a>
    </div>
</div>

<!-- 左侧导航栏 -->
<div class="nav-container">
    <div class="student-label">功能导航</div>
    <ul>
        <li><a href="${pageContext.request.contextPath}/student/book?method=queryBooks">查看书籍</a></li>
        <li><a href="${pageContext.request.contextPath}/student/borrow?method=showUnreturned">还书</a></li>
        <li class="active"><a href="${pageContext.request.contextPath}/student/borrowRecord?method=showBorrowRecords">借书记录</a></li>
        <li><a href="${pageContext.request.contextPath}/student/fine?method=showFines">罚款情况</a></li>
        <li><a href="${pageContext.request.contextPath}/student/libcard?method=showLibCard">借书证</a></li>
        <li><a href="${pageContext.request.contextPath}/student/rank?method=borrowRank">借书排行榜</a></li>
        <li><a href="${pageContext.request.contextPath}/student/rank?method=bookHotRank">热门书籍</a></li>
    </ul>
</div>

<!-- 中间内容区域 -->
<div class="content-container">
    <h2>查看借书记录</h2>
    
    <div class="filter-box">
        <form action="${pageContext.request.contextPath}/student/borrowRecord" method="get">
            <input type="hidden" name="method" value="showBorrowRecords"/>
            状态：<select name="status">
                <option value="全部" <%= ("全部".equals(request.getAttribute("status")) || request.getAttribute("status") == null) ? "selected" : "" %>>全部</option>
                <option value="未归还" <%= "未归还".equals(request.getAttribute("status")) ? "selected" : "" %>>未归还</option>
                <option value="按时还" <%= "按时还".equals(request.getAttribute("status")) ? "selected" : "" %>>已还（按时）</option>
                <option value="超时还" <%= "超时还".equals(request.getAttribute("status")) ? "selected" : "" %>>已还（超时）</option>
            </select>
            <input type="submit" value="查询"/>
        </form>
    </div>
    
    <table class="record-table">
        <tr>
            <th>流水号</th>
            <th>副本条码</th>
            <th>书名</th>
            <th>借出日期</th>
            <th>应还日期</th>
            <th>实际归还日期</th>
            <th>还书状态</th>
            <th>罚款金额</th>
            <th>罚款状态</th>
        </tr>
        <%
            java.util.List recordList = (java.util.List)request.getAttribute("recordList");
            if(recordList != null){
                for(int i=0;i<recordList.size();i++){
                    Object[] row = (Object[])recordList.get(i);
        %>
        <tr>
            <td><%=row[0]%></td>
            <td><%=row[1]%></td>
            <td><%=row[2]%></td>
            <td><%=row[3]%></td>
            <td><%=row[4]%></td>
            <td><%=row[5] != null ? row[5] : "-"%></td>
            <td><%=row[6]%></td>
            <td><%=row[7]%></td>
            <td><%=row[8]%></td>
        </tr>
        <%      }
            }
        %>
    </table>
    <a href="${pageContext.request.contextPath}/student?method=toHome" class="back-link">返回学生首页</a>
</div>
</body>
</html> 